import { Tabs } from 'expo-router';
import React, {useEffect} from 'react';
import {View, type ViewProps, Image, StyleSheet, Text} from 'react-native';

import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

import indexIcon from '@/assets/images/navBar/index.png';
import indexIcon_active from '@/assets/images/navBar/index_active.png';

import releaseIcon from "@/assets/images/navBar/release.png";
import releaseIcon_active from "@/assets/images/navBar/release_active.png";
import meIcon from "@/assets/images/navBar/me.png";
import meIcon_active from "@/assets/images/navBar/me_active.png";
import newIcon from "@/assets/images/navBar/new.png";
import newIcon_active from "@/assets/images/navBar/new_active.png";
import addActivetiy from "@/assets/images/navBar/addActivetiy.png"
import {useConversationStore} from "@/hooks/im/conversation";
import {useDispatch} from "react-redux";
import {AppDispatch} from "@/store";
import {getToken} from "@/utils";
import {setHasLogin} from "@/store/slices/loginSlice";


export default function TabLayout() {
  const colorScheme = useColorScheme();
  const unReadCount = useConversationStore((state) => state.unReadCount);

    useEffect(() => {
        setTimeout(async () => {
            const dispatch = useDispatch<AppDispatch>();
            const token = await getToken();
            if (token) {
                dispatch(setHasLogin(true))
            };
        }, 1000)
    }, []);

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
      }}>
      {/*<Tabs.Screen*/}
      {/*  name="tag"*/}
      {/*  options={{*/}
      {/*    title: '首页',*/}
      {/*    tabBarIconStyle: {*/}
      {/*      fontSize: 20,*/}
      {/*      fontWeight: "bold"*/}
      {/*    },*/}
      {/*    tabBarIcon: ({ color, focused }) => {*/}
      {/*        return (*/}
      {/*            <Image source={focused && color !== "#8E8E8F" ? indexIcon_active : indexIcon } style={ styles.iconSize } />*/}
      {/*        )*/}
      {/*    },*/}
      {/*  }}*/}
      {/*/>*/}
      <Tabs.Screen
        name="index"
        options={{
            title: '推荐',
            tabBarIconStyle: {
                fontSize: 20,
                fontWeight: "bold"
            },
            tabBarIcon: ({ color, focused }) => {
                // console.log('console.log_two', color);
                return (
                    <Image source={focused && color !== "#8E8E8F" ? releaseIcon_active : releaseIcon } style={ styles.iconSize } />
                )
            },
        }}
        />
        <Tabs.Screen
            name="release"
            options={{
                tabBarIcon: ({ color, focused }) => {
                    // console.log('console.log_two', color);
                    return (
                        <Image source={addActivetiy} style={[styles.iconSize, { width: 45, height: 45 }]}  />
                    )
                },
                tabBarLabelStyle: { display: 'none' }, // 隐藏标题
            }}
        />

        <Tabs.Screen
            name="new"
            options={{
                title: '消息',
                tabBarIconStyle: {
                    fontSize: 20,
                    fontWeight: 400,
                },
                tabBarIcon: ({ color, focused }) => {
                    return (
                        <View>
                            <Image source={focused && color !== "#8E8E8F" ? newIcon_active : newIcon} style={ styles.iconSize } />
                            {
                                unReadCount > 0 && (
                                    <View style={{ position: "absolute", top: -10, right: unReadCount > 99 ? -30 : unReadCount < 10 ? -14 : -22, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 15, backgroundColor: "#FB4B34", borderWidth: 1,borderColor: "#fff" }}>
                                        <Text style={{ color: "#fff", fontSize: 12 }}>{ unReadCount > 99 ? `99+`: unReadCount }</Text>
                                    </View>
                                )
                            }
                        </View>
                    )
                },
            }}
        />
        <Tabs.Screen
            name="me"
            options={{
                title: '我的',
                tabBarIconStyle: {
                    fontSize: 20,
                    fontWeight: 400,
                },
                tabBarIcon: ({ color, focused }) => {
                    // console.log('console.log_two', color);
                    return (
                        <Image source={focused && color !== "#8E8E8F" ? meIcon_active : meIcon } style={ styles.iconSize } />
                    )
                },
            }}
        />
    </Tabs>
  );
}


const styles = StyleSheet.create({
   iconSize: {
       width: 23,
       height: 23,
   },
});
